<route lang="json5" type="page">
	{
	  style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '',
	  },
	}
</route>
<template>
	<view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">


		<view class="main-title main-title-color">
			<view class="main-title-head flex flex-row flex-justify-center"
				style="letter-spacing: 1px;align-items: center;position: relative;">

				<i class="iconfont icon-jiantou" style="position: absolute;left: 20px;color: #F4F6F9;"
					@click="goLast"></i>
				<p class="font-550" style="color: aliceblue;">晚签记录</p>

			</view>

			<view class="main-title-main">
				<img src="../../static/images/background.png" alt="">
				<text class="text1">行万里路，读万卷书</text>
				<!-- :text="progressText" -->
				<wd-circle v-model="current" :strokeWidth="18" color="#4FFEB9" layer-color="rgba(0, 0, 0, 0)"
					:size="160" fill="white"
					customStyle="font-weight:700;font-size:35rpx;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

					<!-- <view>
						<p>恭喜完成</p>
						<p>所有任务</p>
					</view> -->


					<view>
						<p style="font-size: 15px;margin-bottom: 5px;">今晚尚未打卡</p>
						<p style="font-size: 10px;color: Gray;margin-bottom: 5px;">距离打卡结束还有</p>
						<p style="font-size: 10px;">{{ current }}分钟</p>
					</view>



					<!-- <view> -->
					<!-- 后期判断有无 加<br>（1） -->
					<!-- <p style="font-size: 15px;margin-bottom: 5px;">算法与数据结构<br>（1）班</p> -->
					<!-- <p style="font-size: 10px;color: Gray;margin-bottom: 5px;">距离打卡结束还有</p> -->
					<!-- <p style="font-size: 10px;">{{ current }}</p> -->
					<!-- </view> -->

				</wd-circle>

				<p class="walk-text1">今日步行<span style="font-weight: 600;">{{ steps }}</span>步</p>
				<p class="walk-text2">距离<span style="font-weight: 600;">{{ kilometre }}</span>公里</p>

				<wd-button custom-class="signIn-button" size="large" @click="handleClick">
					{{ buttonText }} <i class="iconfont icon-dayuhao"></i>
				</wd-button>
				<!-- <button class="signIn-button">开始签到 <i class="iconfont icon-bushu"></i></button> -->
			</view>
		</view>
		<!-- 弹窗-签到 -->
		<wd-popup v-model="isShow" position="top" custom-style="height: 70vh;background-color: #FFFFFF;"
			@close="handleClose">
			<view class="popup-view">
				<p class="font-550" style="letter-spacing: 1px;font-size: large;">晚签到</p>
			</view>
		</wd-popup>

		<!-- 弹窗-签到记录 -->
		<wd-popup v-model="isHistroyShow" position="bottom"
			custom-style="height: 68vh;background-color: #FFFFFF;border-top-right-radius: 10rpx;border-top-left-radius: 10rpx;"
			@close="handleClose">
			<view class="popup-view" style="margin-top: 0;">
				<p class="font-550 border-gary w-100% pa-3" style="font-size: large;text-align: center;">签到记录</p>

				<view class="border-gary w-100%">
					<view class="pa-5">
						<view class="flex flex-row" style="margin-bottom: 15rpx;">
							<p style="margin-right: 20rpx;">姓名：陈品天</p>
							<p>学号：212306413</p>
						</view>
						<p style="margin-bottom: 15rpx;">班级：2023级软件工程03班</p>
						<p style="margin-bottom: 15rpx;">手机号：18305928581</p>
						<p>宿舍：西区学生公寓3#506A-C</p>
					</view>
				</view>

				<!-- 签到状态 -->
				<view class="w-100%">
					<view class="pa-5">
						<p style="margin-bottom: 15rpx;">签到状态：已签到</p>
						<p style="margin-bottom: 15rpx;">签到时间：{{ clockInDate }} 16:47:25</p>
						<p style="margin-bottom: 15rpx;">签到地点：福州市鼓楼区杨桥西路50号</p>
						<p style="margin-bottom: 15rpx;">签到图片：</p>

						<img src="../../static/images/background.png" alt="">
					</view>
				</view>

				<p class="font-550 w-100%" style="font-size: large;text-align: center;color: #5D9CF8;"
					@click="closeHistory">收起</p>
			</view>
		</wd-popup>

		<view class="main-title-main functionList flex flex-col " style="margin-top: 5vh;">

			<view class="main-title-main flex flex-justify-center">
				<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
					@monthSwitch="monthSwitch" style="width: 95%;">

					<view class="w-95% clockInRecords">

						<view class="w-90% grid grid-cols-4  mx-auto">
							<view class="flex flex-col flex-justify-center">
								<p class="font-600 font-size-4">270</p>
								<p style="color: gray;">已打卡</p>
							</view>


							<view class="flex flex-col flex-justify-center">
								<p class="font-600 font-size-4">12</p>
								<p style="color: gray;">未打卡</p>
							</view>

							<view class="flex flex-col flex-justify-center">
								<p class="font-600 font-size-4">18</p>
								<p style="color: gray;">校外签到</p>
							</view>

							<view class="flex flex-col flex-justify-center">
								<p class="font-600 font-size-4">18</p>
								<p style="color: gray;">走读签到</p>
							</view>
						</view>


					</view>

				</uni-calendar>
			</view>

		</view>

	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const current = ref<number>(30)
let steps = ref<number>(15600)
let kilometre = ref<number>(4.2)
let buttonText = ref<string>("开始签到")
// 签到弹窗是否开启
let isShow = ref<boolean>(false)
// 签到记录是否开启
let isHistroyShow = ref<boolean>(false)

let clockInDate = ref<string>("2024年09月01日")

const progressText = `恭喜完成所有任务`

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// var amapFile = require('@/common/amap-wx.js');
// var myAmapFun = new amapFile.AMapWX({ key: '这里写在高德申请的key' });


onReady(() => {
	// this.mapContext = uni.createMapContext('my-map', this);//创建mapContext对象，为了用uni提供的组件控制方法
})

// 测试 uni API 自动引入
onLoad(() => {

})

const goLast = () => {
	uni.navigateBack({
		delta: 1
	});
}

// 获取任意时间的函数  
function getDate(date?: Date | string, AddDayCount = 0): {
	fullDate: string;
	year: number;
	month: string;
	date: string;
	day: number;
} {
	if (!date) {
		date = new Date();
	}
	if (typeof date === 'string') {
		date = date.replace(/-/g, '/');
	}
	const dd = new Date(date);

	dd.setDate(dd.getDate() + AddDayCount);

	const y = dd.getFullYear();
	const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1).toString();
	const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate().toString();
	return {
		fullDate: `${y}-${m}-${d}`,
		year: y,
		month: m,
		date: d,
		day: dd.getDay(),
	};
}

// 响应式数据  
const showCalendar = ref(false);
const info = ref({
	lunar: true,
	range: true,
	insert: false,
	selected: [],
	date: '',
	startDate: '',
	endDate: '',
});

// const getMyLocation = () => {
// 	let that = this;
// 	uni.getLocation({
// 		type: 'gcj02',//uniapp只支持gch02坐标，用到map上的话一定要改
// 		success: function (res) {
// 			that.myLatitude = res.latitude;
// 			that.myLongitude = res.longitude;
// 			console.log(that.myLatitude);
// 			console.log(that.myLongitude);
// 		},
// 		fail: function (e) {
// 			console.log(e);
// 		}
// 	});
// }

// 组件挂载后执行的逻辑  
onMounted(() => {
	setTimeout(() => {
		info.value.date = getDate(new Date(), -30).fullDate;
		info.value.startDate = getDate(new Date(), -60).fullDate;
		info.value.endDate = getDate(new Date(), 30).fullDate;
		info.value.selected = [
			// 	{
			// 		date: getDate(new Date(), -3).fullDate,
			// 		info: '打卡',
			// 	},
			{
				date: getDate(new Date(), -4).fullDate,
			},
			{
				date: getDate(new Date(), -3).fullDate,
			},
			{
				date: getDate(new Date(), -2).fullDate,
			},
			{
				date: getDate(new Date(), 0).fullDate,
			},
			// 	{
			// 		date: getDate(new Date(), -1).fullDate,
			// 		info: '已打卡',
			// 	},
		];
	}, 2000);

	// 可以在这里调用其他逻辑，如显示日历  
	showCalendar.value = true;

	uni.getLocation({
		type: 'wgs84',
		success: function (res) {
			console.log('当前位置的经度：' + res.longitude);
			console.log('当前位置的纬度：' + res.latitude);
		},
		fail: function (e) {
			console.log(e);
		}
	});
});

// 收起弹窗
const handleClose = () => {
	isShow.value = false;
	console.log(isShow.value);
}

const handleClick = () => {
	isShow.value = true;
	console.log(isShow.value);
}

// 关闭历史记录
const closeHistory = () => {
	isHistroyShow.value = false;
}

// 格式化时间
function formatDate(dateStr) {
	const [year, month, day] = dateStr.split('-');
	return `${year}年${month.padStart(2, '0')}月${day.padStart(2, '0')}日`;
}

// 方法  
function open() {
	// 假设这里有一个引用到日历组件的方法  
	// console.log('Open calendar');  
}

function close() {
	console.log('弹窗关闭');
}

function change(e: { fulldate: string }) {
	console.log(e.fulldate);
	clockInDate.value = formatDate(e.fulldate)
	isHistroyShow.value = true;

	// if (info.value.selected.length > 5) return;
	// info.value.selected.push({
	// 	date: e.fulldate,
	// 	info: '打卡',
	// });
}

function confirm(e: { fulldate: string }) {
	console.log('confirm 返回:', e);
}

function monthSwitch(e: any) {
	console.log('monthSwitchs 返回:', e);
}
// 日历

</script>

<style scoped>
p {
	text-align: center;
}

.main-title {
	width: 748rpx;
	/* height: 45vh; */
	height: 38vh;
}

.border-gary {
	border-bottom: 1px solid rgba(128, 128, 128, 0.415);
}

.main-title-color {
	/* border: 1px solid black; */
	background: linear-gradient(to right, #7AE3FE, #45AFF8);
	box-shadow: 0 5px 5px -2px rgba(68, 133, 171, 0.5), 0 8px 7px 5px rgba(202, 232, 251, 0.5);
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
}

.main-title-head {
	/* width: 746rpx; */
	height: 15%;
	background: linear-gradient(to right, #2B87F6, #2B71F6);
	box-shadow: 0 5px 5px -5px rgba(42, 127, 177, 0.5), 0 8px 10px -5px rgba(24, 54, 72, 0.5);
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
	padding: 12rpx 0 12rpx 38rpx;
}

.main-title-head>img {
	border: 2px solid white;
	border-radius: 50%;
	width: 70rpx;
	height: 70rpx;
}

.main-title-main {
	width: 746rpx;
	/* box-shadow: 0 5px 5px 5px rgba(30, 152, 223, 0.5), 0 8px 10px 5px rgba(97, 142, 170, 0.5); */
}

.main-title-main>img {
	/* width: 250px;
	height: 220px; */
	width: 30vh;
	height: 23vh;
	position: absolute;
	/* top: 110px; */
	/* left: 130px; */
	top: 8%;
	left: 30%;
	z-index: 0;
}

.text1 {
	letter-spacing: 1px;
	position: absolute;
	color: aliceblue;
	font-size: 14px;
	font-weight: 550;
	/* left: 270px; */
	/* top: 110px; */
	left: 60%;
	top: 9%;
}

.walk-text1 {
	letter-spacing: 1px;
	position: absolute;
	color: aliceblue;
	font-size: 14px;
	/* left: 85px;
	top: 340px; */
	left: 20%;
	top: 32%;
}

.walk-text2 {
	letter-spacing: 1px;
	position: absolute;
	color: aliceblue;
	font-size: 14px;
	/* left: 245px;
	top: 340px; */
	left: 60%;
	top: 32%;
}

.wd-circle[data-v-4ababa18] {
	position: relative;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	top: 25px;
	left: 30px;
}


.signIn-button {
	height: 100rpx !important;
	position: absolute;
	color: #925E00 !important;
	font-weight: 700;
	/* background-color: #FECB46 ; */
	background: linear-gradient(to right, #FECB46, #eef785) !important;
	/* font-size: 14px;
	font-weight: 550; */
	left: 34%;
	top: 35vh;
}

.functionList>p {
	font-size: 18px;
	font-weight: 700;
	margin-left: 4vh;
}

.uni-calendar-item__weeks-box-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2.5rem;
}

.clockInRecords {
	border: 0.5px solid rgba(178, 175, 175, 0.224);
	border-radius: 20rpx;
	height: 8.5vh;
	margin-top: 1vh;
	margin-bottom: 1vh;
	box-shadow: 1px 1px 3px -2px rgba(131, 136, 138, 0.5), 2px 2px 5px 1px rgba(179, 194, 203, 0.5);

	display: flex;
	flex-direction: row;
}

.popup-view {
	margin-top: 7vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.popup-view p {
	text-align: start;
	letter-spacing: 1px;
	font-weight: 550;
}

.popup-view img {
	width: 100%;
	height: 22vh;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10rpx;
}
</style>
